<!--
 * @Author: zjf
 * @Date: 2022-09-26 10:12:22
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-13 09:41:25
 * @Description:
-->
<template>
  <div id="map-preview">
    <div class="map-btn-right">
      <el-button size="mini" @click="resetMap()" icon="el-icon-refresh"> </el-button>
      <el-button v-if="hasEdit" size="mini" @click="openEdit()" type="primary">编辑 </el-button>
    </div>

    <DialogForm ref="DialogForm" formTitle="项目红线" :onlyMap="true"></DialogForm>

  </div>
</template>

<script>
import cfmap from "cfmap";
import DialogForm from '../../../projectManagement/views/BasicInformation/DialogForm.vue'
export default {
  components: {
    DialogForm,
  },
  props: {
    projectId: { // 项目id
      type: String,
      default: '',
    },
    hasEdit: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
  },
  data() {
    return {
      loading: true,
      mapboxmap: null,

      geoData: null,
      geometry: null,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadMap();
    },
    openEdit() {
      if (this.projectId) {
        this.$refs.DialogForm.open({ id: this.projectId, activeName: 'tab1' })
      } else {
        this.$message({
          type: 'warning',
          message: '暂无项目信息！'
        })
      }
    },

    /** 获取项目空间信息 */
    async getGeoData() {
      if (this.projectId) {
        const api = window.$crud("project/geography/list");
        const data = await this.$awaitWraper(api.getInfo({ projectId: this.projectId }))
        if (data && data.length) {
          this.projectGeoId = data[0].id
          var { parseFromWK } = require('@/core/util/wkt.js')
          this.geometry = data[0].geometry
          this.geoData = parseFromWK(data[0].geometry)
          this.setGeoToMap(this.geoData)
        }
      }
    },
    /** 加载地图 */
    loadMap() {
      cfmap.setConfig({
        EPSG: 3857,
      });
      this.mapboxmap = new cfmap.Map({
        container: "map-preview",
        center: [121.127710, 31.480273],
        zoom: 12.848,
        minZoom: 12.5,
        style: `${process.env.VUE_APP_BASE_GEO}v1/cf/rest/services/MapService/VM/3a0e10d8-d5a7-0f56-a47b-8e608af35b73?token=${process.env.VUE_APP_BASE_TOKEN}`, // 影像地图 太仓高新区
      });
      this.mapboxmap.on('load', () => {
        // 添加源数据
        this.mapboxmap.addSource('Source_data', {
          type: 'geojson',
          data: {
            'type': 'FeatureCollection',
            'features': []
          }
        });
        // 添加面图层
        this.mapboxmap.addLayer({
          id: 'load_draw_polygon',
          type: 'fill',
          source: 'Source_data',
          "filter": ["all", ["==", "$type", "Polygon"]],
          "paint": {
            "fill-color": "#D20C0C",
            "fill-outline-color": "#D20C0C",
            "fill-opacity": 0.1
          }
        });
        // 添加线图层
        this.mapboxmap.addLayer({
          id: 'load_draw_Lines',
          type: 'line',
          source: 'Source_data',
          // "filter": ["all", ["==", "$type", "LineString"]],
          "layout": { "line-cap": "round", "line-join": "round" },
          "paint": {
            "line-color": "#D20C0C",
            "line-dasharray": [0.2, 2],
            "line-width": 2
          }
        });
        // 添加点图层
        this.mapboxmap.addLayer({
          id: 'load_draw_points',
          type: 'circle',
          source: 'Source_data',
          "filter": ["all", ["==", "$type", "Point"]],
          paint: {
            'circle-color': '#fff',
            'circle-radius': 5,
            'circle-stroke-width': 2,
            'circle-stroke-color': '#ff3341'
          }
        });
        this.getGeoData()
      });
    },
    /** 重置视图 */
    resetMap() {
      this.mapboxmap.flyTo({
        center: [121.127710, 31.480273],
        zoom: 10.848,
        pitch: 0,
        bearing: 0,
      })
    },
    /** 上图 */
    setGeoToMap(geojson) {
      if (geojson.type) {
        var geoData = {
          'type': 'FeatureCollection',
          'features': []
        }
        if (geojson.type !== 'FeatureCollection') {
          geoData.features[0] = {
            'type': 'Feature',
            'geometry': geojson
          }
          this.mapboxmap.getSource('Source_data').setData(geoData);
        } else {
          geoData = geojson
          this.mapboxmap.getSource('Source_data').setData(geojson);
        }
        var turf = require('@turf/turf')
        var bbox = turf.bbox(geoData);
        this.mapboxmap.fitBounds(bbox, {
          maxZoom: 15,
          padding: 100,
        });
      }
    },

  },
}
</script>

<style lang="scss" scoped>
#map-preview {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.map-btn-right {
  position: absolute;
  z-index: 99;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}

::v-deep {
  .mapboxgl-ctrl-top-right,
  .mapboxgl-ctrl-bottom-right {
    display: none;
  }
}
</style>
